@import "_common";
@import "header";
@import "_footer";

.body{
    .container{
        .top{
            margin-bottom: .58rem;
            h1{
                font-size: .30rem;
                line-height: 1.11rem;
                color: #ff6b08;
            }
            ul{
                overflow: hidden;
                li{
                    position: relative;
                    overflow: hidden;
                    float: left;
                    margin-right: .31rem;
                    a:nth-child(1){
                        display: block;
                        width: 3.00rem;
                        border:.01rem solid #eeeeee;
                        img{
                            width: 3.00rem;
                        }
                    }
                    a:nth-child(2){
                        position: absolute;
                        top: 1.40rem;
                        left: 0;
                        display: block;
                        font-size: .14rem;
                        line-height: 1.428;
                        text-align: center;
                        color: #fff;
                        width: 3.00rem;
                        height: 2.00rem;
                        background: rgba(0,0,0,0.6);
                    }
                    
                }
                @media (max-width: 1024px){
                    li{
                        a:nth-child(1){
                            
                            width: 3.10rem;
                            
                            img{
                                width: 3.10rem;
                            }
                        }
                       a:nth-child(2){
                            top: 1.25rem;
                            width: 3.10rem;
                        } 
                    }
                    li:hover a:nth-child(2){
                        top:1.60rem;
                    }
                }
                @media (max-width: 768px){
                    li{
                        a:nth-child(1){
                            
                            width: 3.30rem;
                            
                            img{
                                width: 3.30rem;
                            }
                        }
                       a:nth-child(2){
                            top: 1.0rem;
                            width: 3.30rem;
                        } 
                    }
                    
                }
                @media (max-width: 475px){
                    li{
                        a:nth-child(1){
                            
                            width: 3.30rem;
                            
                            img{
                                width: 3.30rem;
                            }
                        }
                       a:nth-child(2){
                            top: 1.2rem;
                            width: 3.30rem;
                        } 
                    }
                    li:hover a:nth-child(2){
                        top:0rem;
                    }
                    
                }
                li:last-child(){
                    margin-right: 0;
                }
                li:hover a:nth-child(2){
                    top:1.20rem;
                }
            }
        }
        .bottom{
            .row{
                .col-md-4{
                    margin-bottom: .85rem;
                    a{
                        display: block;
                        width: 2.21rem;
                        img{
                            width: 2.21rem;
                        }
                    }
                }
                .col-md-8{
                    font-size: .14rem;
                    a:nth-child(1){
                        color: #000;
                        font-size: .18rem;
                    }
                    a:hover{
                        color:#ff6900;
                        text-decoration: none;
                    }
                    a:nth-child(1):active{
                        color:#ff6900;
                    }
                    p{
                        line-height: .44rem;
                        margin-bottom: 0;
                    }
                    a:nth-child(3){
                        color: #000;
                        line-height: .24rem;
                    }
                    div{
                        width: .96rem;
                        height: .30rem;
                        border:.01rem solid #ff6900;
                        border-radius: .12rem;
                        text-align: center;
                        color: #ff6900;
                        line-height: .30rem;
                        margin-left: auto;
                        
                    }
                    div:hover{
                        background: #ff6900;
                        color: #fff;
                    }
                    div:active{
                        background: #ff6900;
                        color: #fff;
                    }
                }
                @media (max-width: 1024px){
                    .col-md-4{
                        width: 30%;
                        float: left;
                    }
                    .col-md-8{
                        width: 66%;
                        float: right;
                    }
                }
                @media (max-width: 768px){
                    .col-md-4{
                        
                        a{
                            
                            width: 3.21rem;
                            img{
                                width: 3.21rem;
                            }
                        }
                    }
                    .col-md-8{
                        
                        div{
                            width: 1.96rem;
                            height: .50rem;
                            line-height: 1.428;
                            margin-bottom: 0.5rem;
                        }
                    }
                }
                @media (max-width: 475px){
                    .col-md-4{
                        display: none;
                    }
                    .col-md-8{
                        width: 99%;
                        div{
                            width: 2.96rem;
                            height: .90rem;
                            
                            margin-bottom: 0.5rem;
                        }
                    }
                }
            }
            
            nav{
                border-top:.01rem dashed #d4d4d4;
                text-align: center;
                padding: .35rem 0 .25rem;
                ul{
                    display: inline-block;
                    overflow: hidden;
                    margin-bottom: 0;
                    li{
                        float: left;
                        font-size: .12rem;
                        padding:.08rem .12rem .10rem;
                        border:.01rem solid #dddddd;
                        border-right: 0;
                    }
                    
                    li:first-child(){
                        border-top-left-radius: 0.03rem;
                        border-bottom-left-radius: 0.03rem;
                    }
                    li:last-child(){
                        border-right: 0.01rem solid #dddddd;
                        border-top-right-radius: 0.03rem;
                        border-bottom-right-radius: 0.03rem;

                    }
                    li:hover{
                        background: #e34637;
                        color: #fff;
                    }
                }
            }
            
        }
    }
}